<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html class="iframe-h">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>用户管理</title>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/statics/admin/js/jquery-3.5.0.min.js"></script>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/statics/admin/bootstrap/js/bootstrap.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/statics/admin/js/javascript.js"></script>
    <link rel="stylesheet" type="text/css"
          href="${pageContext.request.contextPath}/statics/admin/bootstrap/css/bootstrap.css"/>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/statics/admin/layui/css/layui.css"/>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/statics/admin/css/admin.css"/>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/statics/admin/css/page.css"/>
    <style type="text/css">
        a:hover {
            text-decoration: none;
        }
    </style>
    <script type="text/javascript">
        function toAddDictionary() {
            window.location.href = "${pageContext.request.contextPath}/admin/toAddDictionary.do";
        }

        //禁用功能
        $(function () {
            $("ul.pagination li.disabled a").click(function () {
                return false;
            })
        });
    </script>
</head>

<body>
<div class="wrap-container clearfix">
    <div class="column-content-detail">
        <form class="layui-form layui-inline" action="${pageContext.request.contextPath}/admin/getDictionaryLike.do"
              method="get" style="float: right">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <input type="text" name="wordLike" required lay-verify="required" placeholder="请输入单词"
                           autocomplete="off" class="layui-input">
                </div>
                <button class="layui-btn layui-btn-normal" type="submit">搜索</button>
            </div>
        </form>
        <div id="table-list">
            <form action="${pageContext.request.contextPath}/admin/deleteDictionaries.do" method="post">
                <div class="layui-inline tool-btn">
                    <a onclick="toAddDictionary()" class="layui-btn layui-btn-small layui-btn-normal addBtn">
                        <i class="layui-icon" title="添加单词">&#xe654;</i>
                    </a>
                    <button class="layui-btn layui-btn-small layui-btn-danger delBtn"
                            type="submit"
                            onclick="if (confirm('确认删除选中的单词吗?') === false) return false;">
                        <i class="layui-icon" title="删除选中的单词">&#xe640;</i>
                    </button>
                </div>
                <table class="layui-table" lay-even lay-skin="nob">
                    <colgroup>
                        <col width="50">
                        <col class="hidden-xs" width="50">
                        <col class="hidden-xs" width="80">
                        <col class="hidden-xs" width="160">
                        <col class="hidden-xs" width="160">
                        <col class="hidden-xs" width="160">
                        <col class="hidden-xs" width="160">
                        <col class="hidden-xs" width="180">
                    </colgroup>
                    <thead>
                    <tr>
                        <th><input type="checkbox" name="" lay-skin="primary" onclick="swapCheck()"></th>
                        <th class="hidden-xs"><b>ID</b></th>
                        <th class="hidden-xs"><b>单词</b></th>
                        <th class="hidden-xs"><b>翻译</b></th>
                        <th class="hidden-xs"><b>词性</b></th>
                        <th class="hidden-xs"><b>释义</b></th>
                        <th class="hidden-xs"><b>例句</b></th>
                        <th class="hidden-xs"><b>操作</b></th>
                    </tr>
                    </thead>
                    <tbody>
                    <c:forEach items="${dictionaryList}" var="dic">
                        <tr>
                            <td><input type="checkbox" name="ids" lay-skin="primary" value="${dic.dictionaryId}"/></td>
                            <td class="hidden-xs">${dic.dictionaryId}</td>
                            <td class="hidden-xs">${dic.word}</td>
                            <td class="hidden-xs">
                                <label>
                                    <textarea class="layui-textarea" readonly cols=""
                                              rows="">${dic.translation.trim()}</textarea>
                                </label>
                            </td>
                            <td class="hidden-xs">
                                <label>
                                    <textarea class="layui-textarea" readonly cols="" rows="">
                                        <c:if test="${empty dic.comment}">无</c:if>
                                        <c:if test="${not empty dic.comment}">${dic.comment.trim()}</c:if>
                                    </textarea>
                                </label>
                            </td>
                            <td class="hidden-xs">
                                <label>
                                    <textarea class="layui-textarea" readonly cols="" rows="">
                                        <c:if test="${empty dic.mean}">无</c:if>
                                        <c:if test="${not empty dic.mean}">${dic.mean.trim()}</c:if>
                                    </textarea>
                                </label>
                            </td>
                            <td class="hidden-xs">
                                <label>
                                    <textarea class="layui-textarea" readonly cols="" rows="">
                                        <c:if test="${empty dic.example}">无</c:if>
                                        <c:if test="${not empty dic.example}">${dic.example.trim()}</c:if>
                                    </textarea>
                                </label>
                            </td>
                            <td>
                                <div class="layui-inline">
                                    <a class="layui-btn layui-btn-small go-btn"
                                       onclick="window.location.href = '${pageContext.request.contextPath}/admin/toUpdateDictionary.do?dictionary_id=${dic.dictionaryId}'">
                                        <i class="layui-icon" title="编辑单词信息">&#xe642;</i>
                                    </a>
                                    <a class="layui-btn layui-btn-small layui-btn-danger del-btn"
                                       onclick="if (confirm('确认删除吗?') === false) return false;"
                                       href="${pageContext.request.contextPath}/admin/deleteDictionaryById.do?dictionary_id=${dic.dictionaryId}">
                                        <i class="layui-icon" title="删除单词">&#xe640;</i>
                                    </a>
                                </div>
                            </td>
                        </tr>
                    </c:forEach>
                    </tbody>
                </table>
            </form>
            <div class="page-wrap">
                <ul class="pagination">
                    <%--跳到首页 这里做了判断 如果没有前一页 那么 跳到首页的这个标签是不可点击的 class="disabled" --%>
                    <li
                            <c:if test="${!page.hasPreviouse}">class="disabled"</c:if> >
                        <a href="?page.start=0">   <%-- 首页的开始数据的索引为0 点击后会发现地址栏变为 http://localhost:8080/DemoMVC/getlist?page.start=0  是作为参数显式传递的 --%>
                            <span>
                                <b> << </b>
                            </span>
                        </a>
                    </li>
                    <%--跳到前一页 同样做了判断 如果没有前一页 则不可点击前跳 class="disabled" --%>
                    <li
                            <c:if test="${!page.hasPreviouse}">class="disabled"</c:if> >
                        <a href="?page.start=${page.start-page.count}"
                           class="layui-laypage-prev"> <%--当前页面数据索引 - 每页显示条数 = 上一页的第一条数据索引 --%>
                            <span>
                                <b> < </b>
                            </span>
                        </a>
                    </li>
                    <%--中间的分页  显示各页号--%>
                    <%-- begin:开始的元素 end:最后一个元素 varStatus:代表循环状态的变量名称 --%>
                    <%-- 比如我一共39条元素 共4页 第一页记为0 最后一页 4-1 =3  --%>
                    <c:forEach begin="0" end="${page.totalPage-1}" varStatus="status">
                        <%-- 这部分解释下
                             status.count：从1开始计数  1 2 3 4 ....39
                             status.index：从0开始计数  0 1 2 3 ....38
                             page.count:   每页数量
                              -10 <= status.count*page.count-page.start<= 30
                             显示当前页码的前两个和后两个就可，例如当前页码为3的时候，就显示 1 2 3(当前页) 4 5 的页码
                             这里不理解没关系 一会儿会有图解
                         --%>
                        <c:if test="${status.count*page.count-page.start<=30 && status.count*page.count-page.start>=-10}">
                            <%-- status.index*page.count==page.start 判断是否是目前的这一页
                                 举例：status.index = 2  page.count = 10
                                       第一页 0  第二页 10  第三页 20   （数字指每页第一行的索引）
                                       如果现在在第三页 那么 2 * 10 = 20  条件成立
                                       class="disabled"  此页数的标签不可点击
                                       class="current"   此页数的标签颜色显示为灰色表示目前位置停留在此页 --%>
                            <li <c:if test="${status.index*page.count==page.start}">class="disabled"</c:if>>
                                <a href="?page.start=${status.index*page.count}"
                                   <c:if test="${status.index*page.count==page.start}">class="current"</c:if>
                                ><b>${status.count}</b></a>
                            </li>
                        </c:if>
                    </c:forEach>
                    <%--跳到下一页 同样做了判断 如果没有下一页 则不可点击后跳 class="disabled" --%>
                    <li <c:if test="${!page.hasNext}">class="disabled"</c:if>>
                        <a href="?page.start=${page.start+page.count}" class="layui-laypage-next">
                            <span>
                                <b> > </b>
                            </span>
                        </a>
                    </li>
                    <%--跳到尾页 如果没有后一页 那么 跳到尾页的这个标签是不可点击的 class="disabled" --%>
                    <li <c:if test="${!page.hasNext}">class="disabled"</c:if>>
                        <a href="?page.start=${page.last}">
                            <span>
                                <b> >> </b>
                            </span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<script src="${pageContext.request.contextPath}/statics/admin/layui/lay/modules/layer.js"
        type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/statics/admin/layui/layui.js" type="text/javascript"
        charset="utf-8"></script>
<script src="${pageContext.request.contextPath}/statics/admin/js/common.js" type="text/javascript"
        charset="utf-8"></script>
</body>
</html>
